
const {ccclass, property} = cc._decorator;

@ccclass
export default class JoyStick extends cc.Component {

   @property(cc.Node)
   public handle:cc.Node = null;

   @property(cc.Camera)
   public UICamera:cc.Camera = null;

   @property
   public maxRadius = 50;

   public moveInput:cc.Vec2 = new cc.Vec2(0,0);

   private pointDownPos:cc.Vec2 = new cc.Vec2(0,0)




   public  onLoad(): void {
    this.handle.on(cc.Node.EventType.TOUCH_START,this.onTouchStart,this)
    this.handle.on(cc.Node.EventType.TOUCH_MOVE,this.onTouchMove,this)
    this.handle.on(cc.Node.EventType.TOUCH_END,this.onTouchEnd,this)
    this.handle.on(cc.Node.EventType.TOUCH_CANCEL,this.onTouchEnd,this)


       
   }

    public onDestroy(): void {
        this.handle.off(cc.Node.EventType.TOUCH_START,this.onTouchStart,this)
        this.handle.off(cc.Node.EventType.TOUCH_MOVE,this.onTouchMove,this)
        this.handle.off(cc.Node.EventType.TOUCH_END,this.onTouchEnd,this)
        this.handle.off(cc.Node.EventType.TOUCH_CANCEL,this.onTouchEnd,this)

       
   }

   public onTouchStart(touch:cc.Event.EventTouch){
    console.log('onTouchStart======================');

    this.handle.setPosition(0,0);
    let screenPos  =  touch.getLocation(); //worldPos
    let worldPos =this.UICamera.getScreenToWorldPoint(screenPos)
   
    let localPos =  this.node.convertToNodeSpaceAR(cc.v2(worldPos.x,worldPos.y))
    this.pointDownPos.set(localPos);
    this.moveInput = cc.v2(0,0)
    console.log('this.moveInput ',this.moveInput.clone() );

    
   }

   public onTouchMove(touch:cc.Event.EventTouch){
    console.log('onTouchMove======================');

    let screenPos  =  touch.getLocation(); //worldPos
    let worldPos =this.UICamera.getScreenToWorldPoint(screenPos)
    let curPos =  this.node.convertToNodeSpaceAR(cc.v2(worldPos.x,worldPos.y))

      let dir = curPos.sub(this.pointDownPos);

      /**固定四个方向的虚拟摇杆 上下左右 */
      if(Math.abs(dir.x)>Math.abs(dir.y)){
        dir.y = 0;
        //左右
        if(dir.x >0){
            dir.x = 1;
            //向右
        }else if(dir.x <0){
            //向左
            dir.x = -1
        }

      }else if(Math.abs(dir.x)<Math.abs(dir.y)){
        //上下
        dir.x = 0;

        if(dir.y >0){
            dir.y =1;
            //向上
        }else if(dir.y <0){
            //向下
            dir.y = -1;
        }

      }
      dir = dir.multiplyScalar(this.maxRadius)
    /**end ，如果把这段代码注释掉就是 任意方向的虚拟摇杆 */

      console.log('dir===========',dir);


     let calmpValue = cc.misc.clampf(dir.mag(),0,this.maxRadius)
     let clampDir =  dir.normalize().multiplyScalar(calmpValue);


     this.handle.setPosition(clampDir);

     this.moveInput = clampDir.normalize();
    console.log('this.moveInput ',this.moveInput.clone() );
     
    
   }

   public onTouchEnd(touch:cc.Event.EventTouch){
    console.log('onTouchEnd======================');

    this.handle.x = 0;
    this.handle.y = 0;

    this.moveInput.x = 0;
    this.moveInput.y = 0;


   }


}
